<template>
  <div>
    <h1>App</h1>
    <!-- .sync就是v-model的衍生,使用该扩展生成的绑定,会自动生成update:xxx的自定义事件传入,其中会将接收到的函数赋值给使用.sync绑定的值 -->
    <ChildrenVue :num.sync="size"></ChildrenVue>
    <!-- <ChildrenVue :num="size" @update:num="num = $event"></ChildrenVue> -->
    <!-- 将事件绑定到当前组件的最外部div上,变成了原生事件 -->
    <SonVue v-model="size" @click.native="sonClick"> </SonVue>
    <!-- 两者是相等的,使用这个v-model利用了其本质就是用$input事件和:value实现的,以及绑定到组件上的事件只要不使用.native就一定会是自定义事件 -->
    <!-- <SonVue :value="size" @input="size = $event"> </SonVue> -->
  </div>
</template>

<script>
import ChildrenVue from './components/children.vue'
import SonVue from './components/Son.vue'

export default {
  name: 'App',
  data() {
    return {
      size: 180,
    }
  },
  components: {
    ChildrenVue,
    SonVue,
  },
  methods: {
    sonClick(size) {
      console.log(size.target.innerHTML)
    },
  },
}
</script>

<style></style>
